<template>
	<view class="main" :style="{ 'margin-top': marTop }">
		<view class="current-city">{{ city }}</view>
		<view class="baoming">
			已有
			<text>{{ baomingNum }}</text>
			人报名
		</view>
		<view v-if="!bmjm" class="button" @click="isShowBm = true">我要加盟</view>
		<view v-if="bmjm" class="button-no">
			<text>报名成功</text>
			<text>等待招商经理与您联系</text>
		</view>
		<view class="mask" v-if="isShowBm">
			<view class="mask-main">
				<view class="main-title">
					<image @click="isShowBm = false" src="http://images.linglinggong.net/icon3/gb.png" mode="aspectFill"></image>
					<text>请填写加盟信息</text>
				</view>
				<view class="main-item">
					<view>姓名</view>
					<view><input type="text" v-model="name" placeholder="请输入您的姓名" placeholder-class="xzcs" /></view>
				</view>
				<view class="main-item">
					<view>电话号码</view>
					<view><input type="number" v-model="phone" placeholder="请输入您的电话号码" placeholder-class="xzcs" /></view>
				</view>
				<view class="main-item">
					<view>验证码</view>
					<view>
						<input type="number" v-model="yzm" placeholder="请输入验证码" placeholder-class="xzcs" style="width: 285rpx;" />
						<view @click="handleSendCode()" class="yzm">获取验证码</view>
					</view>
				</view>
				<view class="main-item">
					<view>城市</view>
					<view @click="handleOpenAddres()">
						<view class="cs-view">
							<input disabled="true" type="text" v-model="xzCity" placeholder="请选择您要加盟的城市" placeholder-class="xzcs" />
							<text class="xzcs">></text>
						</view>
					</view>
				</view>
				<view class="main-button" @click="attract_business()">提 交</view>
			</view>
			<simple-address ref="simpleAddress" :pickerValueDefault="cityPickerValueDefault" @onConfirm="cityOnConfirm" themeColor="#007AFF"></simple-address>
		</view>
	</view>
</template>
<script>
import unit from '../../libs/newUnit.js'
import simpleAddress from '@/components/simple-address/simple-address.vue'
export default {
	components: {
		simpleAddress
	},
	data() {
		return {
			cityPickerValueDefault: [10, 6, 6], //省市区弹框
			city: '',
			baomingNum:0,
			isShowBm:false,
			name:'',
			phone:'',
			yzPhone:false,
			xzCity:'',
			yzm:'',
			county:'',
			province:'',
			bmjm:false,
			marTop:'-160rpx',
		}
	},
	methods: {
		//打开省市区弹框
		handleOpenAddres() {
			this.$refs.simpleAddress.open();
		},
		cityOnConfirm(e){
			this.province = e.labelArr[0]
			this.county = e.labelArr[1]
			this.xzCity=e.labelArr[2]
			console.log('e',e,)
		},
		// 发送验证码
		async handleSendCode() {
			if (!this.checkLoginNameFormat(this.phone)) return
			// this.verificationFlag = true
			let res = await this.$fetch(this.$api.mobile_verification_code, {
				length: 6,
				mobile: this.phone
			}, 'POST')
			return uni.showToast({
				title: res.msg,
				icon: 'none'
			})
			// this.timer = setInterval(() => {
			// 	if (this.count == 0) {
			// 		clearInterval(this.timer)
			// 		this.verificationFlag = false
			// 		this.count = 60
			// 	} else {
			// 		this.count = --this.count
			// 	}
			// }, 1000)
		},
		// 验证手机号格式是否正确
		checkLoginNameFormat(mobile) {
			let reg = /^[1][3456789][0-9]{9}$/
			if (!reg.test(mobile)) {
				uni.showToast({
					title: '手机号格式不正确',
					icon: 'none'
				})
				this.yzPhone=false
				return this.yzPhone
			}
			this.yzPhone=true
			return this.yzPhone
		},
		attract_business(){
			if(this.yzm.length!=6||this.name==''||this.yzPhone==false||this.city=='')return uni.showToast({
				title:'请完整填写信息',
				icon:'none'
			})
			unit.attract_business(this.yzm,this.xzCity,this.county,this.province,this.phone,this.name).then(v=>{
				if(v.code==0){
					uni.showToast({
						title:'已提交',
						icon:'none'
					})
					this.attract_business_size()
					this.isShowBm=false
					this.bmjm=true
					uni.setStorageSync('bmjm',true)
				}
			})
		},
		attract_business_size(){
			unit.getCity().then(v => {
				this.city = v
				unit.attract_business_size(v).then(v=>{
					this.baomingNum = v.data
				})
			})
		},
	},
	onLoad() {
		this.attract_business_size()
		this.bmjm=uni.getStorageSync('bmjm')?uni.getStorageSync('bmjm'):false
		// try{
		// 	let res = uni.getSystemInfoSync()
		// 	//res.screenWidth
		// 	let a = (400 - res.screenWidth) * 5
		// 	if(res.screenHeight>=800){
		// 		this.marTop=res.screenHeight-592<=220?`${-(res.screenHeight-592)+a}rpx`:`-${220+a}rpx`
		// 	}else{
		// 		this.marTop='-220rpx'
		// 	}
		// 	console.log('11',this.marTop,res.screenHeight-592,res.screenWidth)
		// }catch(e){
		// 	//TODO handle the exception
		// }
	},
	onShow(){
	}
}
</script>
<style lang="less" scoped>
.main {
	background-image: url(http://images.linglinggong.net/jiameng/jm.jpg);
	background-size: 100% 100%;
	width: 750rpx;
	height: 1624rpx;
	// margin-top: -208rpx;
}
.current-city {
	transform: translate(399rpx, 232rpx);
	width: 200rpx;
	height: 64rpx;
	background: #402110;
	border-radius: 12rpx;
	font-size: 56rpx;
	font-weight: bold;
	color: #fdc928;
	line-height: 64rpx;
	text-align: center;
}
.baoming {
	width: 750rpx;
	text-align: center;
	transform: translateY(1120rpx);
	font-size: 36rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #1a1a1a;
	line-height: 79rpx;
	& > text {
		font-size: 40rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #fe4b28;
		line-height: 79rpx;
	}
}
.button {
	transform: translateY(1140rpx);
	margin: 0 auto;
	width: 360rpx;
	height: 140rpx;
	background: linear-gradient(90deg, #fdc928, #fd9b28);
	border-radius: 20rpx;
	font-size: 36rpx;
	font-weight: bold;
	color: #4d2b12;
	line-height: 140rpx;
	text-align: center;
}
.mask {
	position: fixed;
	background-color: rgba(0, 0, 0, 0.6);
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 999;
	.mask-main {
		width: 750rpx;
		// height: 812rpx;
		background: #ffffff;
		position: absolute;
		bottom: 0;
		border-radius: 24rpx 24rpx 0 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		.main-title {
			width: 750rpx;
			height: 108rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			& > image {
				width: 23rpx;
				height: 23rpx;
				margin-left: 30rpx;
			}
			& > text {
				display: inline-block;
				width: 690rpx;
				text-align: center;
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #1a1a1a;
				line-height: 45rpx;
			}
		}
		.main-item {
			width: 630rpx;
			height: 72rpx;
			display: flex;
			justify-content: space-between;
			margin-bottom: 20rpx;
			& > view:nth-child(1) {
				text-align-last: justify;
				width: 125rpx;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #111111;
				line-height: 72rpx;
			}
			& > view:nth-child(2) {
				display: flex;
				width: 484rpx;
				height: 72rpx;
				background: #ffffff;
				border: 1rpx solid #bdbdbd;
				border-radius: 8rpx;
				& > input {
					margin: 20rpx;
					width: 444rpx;
					height: 32rpx;
				}
			}
		}
		.main-button {
			width: 630rpx;
			height: 88rpx;
			background: linear-gradient(90deg, #fdc928, #fd9b28);
			border-radius: 20rpx;
			margin: 28rpx 0 160rpx 0;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #402110;
			line-height: 88rpx;
			text-align: center;
		}
	}
}
.yzm {
	width: 144rpx;
	height: 50rpx;
	background: #fdc928;
	border-radius: 8rpx;
	margin: 11rpx 10rpx 11rpx 24rpx;
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #402110;
	text-align: center;
	line-height: 50rpx;
}
.xzcs {
	font-size: 32rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #dbdbdb;
	line-height: 72rpx;
}
.cs-view {
	width: 440rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-left: 20rpx;
	& > input {
		width: 400rpx;
	}
}
.button-no {
	transform: translateY(1140rpx);
	margin: 0 auto;
	width: 360rpx;
	height: 140rpx;
	background: #fdc928;
	border-radius: 20rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	& > text:nth-child(1) {
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #4d2b12;
		line-height: 60rpx;
	}
	& > text:nth-child(2) {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #4d2b12;
		line-height: 40rpx;
	}
}
</style>